<template>
  <div id='TopNav' aria-readonly='true'>
    <div :style="navStyle()" style="">
      <!-- 导航栏左 -->
      <div class='menus' v-show="menusShow" style="margin-left: 90px">
        <RouterLink v-for='(item,key) in menus.slice(0,2)' :key='key' :to='item.link'>
          <el-tag class='menu' :style="menuStyle(item.style,item.link)" :title='item.title'>
            <span @mouseenter="menuHoverOn(item.style,item.link)" @mouseleave="menuHoverOut()">{{ item.name }}</span>
          </el-tag>
          <span style="margin-left: -6px;">⁞</span>
        </RouterLink>
      </div>
      <!-- 图标 -->
      <div style="margin-top: -36px">
        <RouterLink to='/' class='logo' @click.native="toHome"
                    @mouseover.native="LogoHoverOn" @mouseout.native="LogoHoverOut">
          <img ref='LogoCode' src='src/assets/icon/CodeWorld.png' alt='' v-show="logoShow" title='Back首页'>
          <img ref='LogoCodeIn' src='src/assets/icon/CodeWorldIn.png' alt='' v-show="!logoShow" title='菜单导航'>
          <!-- 下标 -->
          <h6 class='line' v-show="!logoShow">
            <p class='lineTop'>———</p>
            <p class='lineBottom'>————</p>
          </h6>
        </RouterLink>
      </div>
      <!-- 导航栏右 -->
      <div class='menus' v-show="menusShow" style="margin-left: 320px;margin-top: -42px">
        <RouterLink v-for='(item,key) in menus.slice(2,4)' :key='key' :to='item.link'>
          <span style="margin-right: -6px;">⁞</span>
          <el-tag class='menu' :style="menuStyle(item.style,item.link)" :title='item.title'>
            <span @mouseenter="menuHoverOn(item.style,item.link)" @mouseleave="menuHoverOut()">{{ item.name }}</span>
          </el-tag>
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TopNav',

  data() {
    return {
      path: this.$route.path,
      logoShow: false,
      menusShow: true,
      menuHoveStyle: '',
      menus: [
        {
          name: '知识', title: '知识', link: '/know',
          style: 'background: blue;'
        },
        {
          name: '信息', title: '信息', link: '/info',
          style: 'background: Dodgerblue;'
        },
        {
          name: '创作', title: '创作', link: '/create',
          style: 'background: Turquoise;'
        },
        {
          name: '星域', title: '星域', link: '/space',
          style: 'background: LimeGreen;'
        },
      ],
      mainMenus: [
        {
          name: '知识', title: '知识', link: '/know',
          style: 'background: blue;'
        },
        {
          name: '信息', title: '信息', link: '/info',
          style: 'background: Dodgerblue;'
        },
        {
          name: '创作', title: '创作', link: '/create',
          style: 'background: Turquoise;'
        },
        {
          name: '星域', title: '星域', link: '/space',
          style: 'background: LimeGreen;'
        },
      ],
    }
  },
  created() {
    this.logoShow = this.path === "/";
    if (this.path === "/" || this.path === "/building" || this.path.includes("/manage")) {
      //JSON.parse(JSON.stringify(data)) 是深拷贝处理数据，其不会影响原数据data
      //this.menus = JSON.parse(JSON.stringify(this.mainMenus))
    }
  },
  props: {
    midMenuShow: { //子组件通过props接受父组件的传值
      type: Boolean,
      required: false,
    },
  },
  // 监听值的变化，然后执行相对应的函数（或者步骤）
  watch: {
    // 此处监听 midMenuShow 变量，当期有变化时执行
    midMenuShow(item1, item2) {
      // item1为新值，item2为旧值
      //console.log(item1, item2, this.midMenuShow)
      //this.menus = item1 === true ? null : JSON.parse(JSON.stringify(this.mainMenus));
    }
  },
  methods: {
    toHome() {
      console.log(this.midMenuShow)
      this.$emit("NavWasHome", this.path === "/");//自定义事件  传递值“子向父组件传值”
      //this.menus = this.menus === null ? JSON.parse(JSON.stringify(this.mainMenus)) : null;
    },
    LogoHoverOn() {
      if (this.path !== "/") {
        this.logoShow = true;
        //this.menusShow = false;
        this.$refs.LogoCode.style.animation = 'none';
      } else {
        this.logoShow = false;
      }
    },
    LogoHoverOut() {
      this.logoShow = this.path === "/";
    },
    menuHoverOn(style, link) {
      if (this.path === link || this.path === "/") {
        this.menuHoveStyle = style;
      }
    },
    menuHoverOut() {
      if (this.path === "/") {
        this.menuHoveStyle = '';
      }
    },
    navStyle() {
      return "width: 600px;margin-left:" + (document.documentElement.clientWidth * 0.5 - 600) / 2 + "px;"
    },
    menuStyle(style, link) {
      if (this.path !== "/") {
        style += "opacity: 0.8;";
      }
      //console.log(this.path, link.substr(0, 5))
      if (this.path.substr(0, 5) === link.substr(0, 5)) {
        style += "box-shadow: 0 -20px blue; color: white; opacity: 0.9;"
      }
      return style;
    },
  },
}
</script>

<style scoped>
#TopNav {
  color: snow;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 50%;
  height: 70px;
  margin-top: 1px;
  position: absolute;
  margin-left: 25%;
  overflow: auto;
  z-index: 2;
}

.logo img {
  width: 35px;
  height: 35px;
  border: solid 3px azure;
  /* 呼吸灯 */
  animation: bgLight 15s linear infinite;
  -webkit-animation: bgLight 15s linear infinite;
}

.line {
  position: absolute;
  width: 50px;
  top: 22px;
  left: 50%;
  color: lightcyan;
  transform: translate(-50%, -50%);
}

.lineTop {
  margin-bottom: -9px;
  color: aquamarine;
}

.lineBottom {
  margin-top: -9px;
  color: aquamarine;
}

.menus {
  width: 190px;
  margin-top: 3px;
}

.menu {
  width: 90px;
  height: 34px;
  padding-top: 2px;
  color: aliceblue;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: unset;
}

.menu:hover {
  /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 */
  box-shadow: 0 -20px cyan;
  color: white;

}

@keyframes bgLight {
  0% {
    opacity: 0.95;
    border: solid 3px yellowgreen;
  }
  10% {
    opacity: 0.90;
    border: solid 3px green;
  }
  20% {
    opacity: 0.80;
    border: solid 3px darkcyan;
  }
  30% {
    opacity: 0.90;
    border: solid 3px green;
  }
  40% {
    opacity: 0.95;
    border: solid 3px greenyellow;
  }
  50% {
    opacity: 1;
    border: solid 3px deepskyblue;
  }
  60% {
    opacity: 0.95;
    border: solid 3px greenyellow;
  }
  70% {
    opacity: 0.90;
    border: solid 3px green;
  }
  80% {
    opacity: 0.80;
    border: solid 3px darkcyan;
  }
  90% {
    opacity: 0.90;
    border: solid 3px green;
  }
  100% {
    opacity: 0.95;
    border: solid 3px yellowgreen;
  }
}


</style>
